<template>
  <view :data-theme="theme()" :class="theme() || ''">
    <!-- #ifdef APP-PLUS -->
    <header-bar></header-bar>
    <!-- #endif -->
    <view class="top-box">
      <view class="index-search-box index-search-box_re d-b-c" id="searchBox">
        <view class="index-search index-search_re t-c flex-1">
          <span class="icon iconfont icon-sousuo"></span>
          <input
            type="text"
            v-model="searchtxt"
            class="flex-1 ml10 f30 gray3"
            placeholder-class="f24 gray6"
            :placeholder="$t('shop.search_merchant')"
            confirm-type="search"
            @confirm="search()"
          />
        </view>
      </view>
      <view class="inner-tab">
        <view
          :class="type_active == 'all' ? 'item active' : 'item'"
          @click="tabTypeFunc('all')"
        >
          <view class="box">{{$t('shop.comprehensive')}}</view>
        </view>
        <view
          :class="type_active == 'sales' ? 'item active' : 'item'"
          @click="tabTypeFunc('sales')"
        >
          <view class="box">{{$t('shop.sales_volume')}}</view>
        </view>
        <view
          :class="type_active == 'score' ? 'item active' : 'item'"
          @click="tabTypeFunc('score')"
        >
          <view class="box"><text>{{$t('shop.rating')}}</text></view>
        </view>
      </view>
    </view>
    <view class="prodcut-list-wrap">
      <scroll-view
        scroll-y="true"
        class="scroll-Y"
        :style="'height:' + scrollviewHigh + 'px;'"
        lower-threshold="50"
        :refresher-triggered="triggered"
        @scrolltolower="scrolltolowerFunc"
        refresher-enabled="true"
        @refresherrefresh="onRefresh"
        @refresherrestore="onRestore"
      >
        <view class="shop_list_body">
          <view
            class="shop-item"
            v-for="(item, index) in shopData"
            :key="index"
          >
            <view class="shop-info-top" @click="goto_shop(item.shopSupplierId)">
              <image
                class="shop_logo"
                :src="item.logoFilePath || '/static/shop-default.png'"
              ></image>
              <view class="shopinfo">
                <view class="f32 fb mb10 text-ellipsis">{{ item.name }}</view>
                <!-- <view class="h3 brand">主营品牌：{{ item.categoryName }}</view> -->
                <view class="d-s-c f24">
                  <view class="pr d-s-c f-s-0">
                    <view class="starts-box">
                      <image
                        class="starts"
                        v-for="(itmes, index) in getScore(item.serverScore, 1)"
                        :key="index"
                        src="/static/icon/start-2.png"
                        mode=""
                      ></image>
                      <image
                        class="starts"
                        v-if="getScore(item.serverScore, 2)"
                        src="/static/icon/start-1.png"
                        mode=""
                      ></image>
                    </view>
                    <image
                      class="starts"
                      v-for="(itmes, index) in 5"
                      :key="index"
                      src="/static/icon/start-0.png"
                      mode=""
                    ></image>
                  </view>
                  <view class="gray6 f-s-0">
                    {{ item.serverScore || 5 }}{{$t('shop.minute')}}
                  </view>
                  <view class="p-0-10 ml10 border-l gray9 f-s-0">
                    {{ item.favCount }}{{$t('shop.followers_count')}}
                  </view>
                </view>
              </view>
              <button class="butns theme-btn">{{$t('shop.enter_merchant')}}</button>
            </view>
            <view
              v-if="shopData[index].productList.length > 0"
              class="shop-product"
            >
              <view
                class="shop-product-item"
                v-for="(item2, index2) in shopData[index].productList"
                :key="index2"
                @click="goto_product(item2.productId)"
              >
                <image
                  class="shop-pitem-image"
                  :src="item2.productImage"
                ></image>
              </view>
            </view>
          </view>
        </view>
        <!-- 没有记录 -->
        <view class="d-c-c p30" v-if="shopData.length == 0 && !loading">
          <text class="iconfont icon-wushuju"></text>
          <text class="cont">{{$t('shop.no_related_records')}}</text>
        </view>
        <uni-load-more v-else :loadingType="loadingType"></uni-load-more>
      </scroll-view>
    </view>
    <!-- #ifdef H5 -->
    <view id="footBottom" v-if="isDomHeight"></view>
    <!-- #endif -->
    <!-- #ifndef H5 -->
    <view id="footBottom" v-if="isDomHeight && osName != 'android'"></view>
    <!-- #endif -->
    <tabBar></tabBar>
  </view>
</template>

<script>
import uniLoadMore from "@/components/uni-load-more.vue";
export default {
  components: {
    uniLoadMore,
  },
  data() {
    return {
      triggered: true,
      isDomHeight: true,
      /*手机高度*/
      phoneHeight: 0,
      /*可滚动视图区域高度*/
      scrollviewHigh: 0,
      /*状态选中*/
      state_active: -1,
      no_more: false,
      loading: true,
      /*最后一页码数*/
      last_page: 0,
      /*当前页面*/
      page: 1,
      /*每页条数*/
      list_rows: 10,
      /*顶部刷新*/
      topRefresh: false,
      /*类别选中*/
      type_active: "all",
      /*价格选中*/
      price_top: false,
      /*店铺列表*/
      shopData: [],
      /*当前页面*/
      searchtxt: "",
      keyWord: "",
      stateTab: false,
      osName: "",
      footerHeight: "",
    };
  },
  computed: {
    /*加载中状态*/
    loadingType() {
      if (this.loading) {
        return 1;
      } else {
        if (this.shopData.length != 0 && this.no_more) {
          return 2;
        } else {
          return 0;
        }
      }
    },
  },
  onShow(){
     uni.setNavigationBarTitle({
			title: this.$t('order.business_listings')
		})
  },
  onReady() {
    uni.hideTabBar();
  },

  mounted() {
    let osName = "";
    uni.getSystemInfo({
      success: function (res) {
        osName = res.osName;
      },
    });
    this.osName = osName;
    this.init();
    this._freshing = false;
    this.restoreData();
    /*获取订单列表*/
    this.getData();
  },
  methods: {
    /*初始化*/
    init() {
      let self = this;
      uni.getSystemInfo({
        success(res) {
          self.phoneHeight = res.windowHeight;
          // 计算组件的高度
          let view = uni.createSelectorQuery().in(self).select(".top-box");
          view
            .boundingClientRect((data) => {
              let h = self.phoneHeight - data.height;
              self.scrollviewHigh = h;
              let footBottomView = uni
                .createSelectorQuery()
                .select("#footBottom");
              if (footBottomView) {
                footBottomView
                  .boundingClientRect((data2) => {
                    if (data2 && data2.height) {
                      self.footerHeight = data2.height;
                      if (self.footerHeight) {
                        // #ifdef H5
                        self.scrollviewHigh = self.scrollviewHigh;
                        // #endif
                        // #ifndef H5
                        self.scrollviewHigh =
                          self.scrollviewHigh - self.footerHeight;
                        // #endif
                      }
                      self.isDomHeight = false;
                    }
                  })
                  .exec();
              }
            })
            .exec();
        },
      });
    },
    getScore(n, type) {
      n = n * 1;
      if (n <= 0 || !n) {
        return 0;
      }
      let num = n % 1;
      if (type == 1) {
        return n - num;
      }
      if (type == 2) {
        if (num == 0) {
          return 0;
        } else {
          return 1;
        }
      }
    },
    /*还原初始化*/
    restoreData() {
      this.shopData = [];
      this.page = 1;
      this.no_more = false;
      this.loading = true;
      this.category_id = 0;
      this.searchtxt = "";
      this.sortType = "";
      this.sortPrice = 0;
    },
    /*类别切换*/
    tabTypeFunc(e) {
      let self = this;
      self.shopData = [];
      self.page = 1;
      self.no_more = false;
      self.loading = true;
      self.type_active = e;
      self.getData();
    },

    /*获取数据*/
    getData() {
      let self = this;
      let page = self.page;
      let list_rows = self.list_rows;
      self.loading = true;
      self._postBody(
        "supplier/index/list",
        {
          pageIndex: page || 1,
          pageSize: list_rows,
          sortType: self.type_active,
          name: self.keyWord,
        },
        (res) => {
          self.loading = false;
          self.last_page = res.data.lastPage;
          self.shopData = self.shopData.concat(res.data.records);
          if (res.data.lastPage <= 1) {
            self.no_more = true;
          } else {
            self.no_more = false;
          }
        }
      );
    },
    onRefresh() {
      if (this._freshing) return;
      this._freshing = true;
      this.restoreData();
      this.getData();
      setTimeout(() => {
        this.triggered = false;
        this._freshing = false;
      }, 2000);
    },
    onRestore() {
      this.triggered = "restore"; // 需要重置
    },
    /*搜索*/
    search() {
      let self = this;
      self.keyWord = self.searchtxt;
      self.restoreData();
      self.getData();
    },
    /*可滚动视图区域到底触发*/
    scrolltolowerFunc() {
      let self = this;
      if (self.no_more) {
        return;
      }
      self.page++;
      if (self.page <= self.last_page) {
        self.getData();
      } else {
        self.no_more = true;
      }
    },

    //跳转店铺首页
    goto_shop(shopSupplierId) {
      this.gotoPage("/pages/shop/shop?shopSupplierId=" + shopSupplierId);
    },
    //跳转商品页面
    goto_product(productId) {
      this.gotoPage("/pages/product/detail/detail?productId=" + productId);
    },
  },
};
</script>

<style lang="scss">
$footer-tabBar-height: 94rpx;

#footBottom {
  width: 100%;
  // height: $footer-tabBar-height;
  height: $footer-tabBar-height;
  padding-bottom: env(safe-area-inset-bottom);
}

.inner-tab {
  position: relative;
  height: 80rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #ffffff;
  z-index: 9;

  .item {
    flex: 1;
    font-size: 30rpx;
    height: 100%;
    line-height: 80rpx;
    position: relative;
    color: #666666;
    font-size: 30rpx;

    .box {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: row;
    }
  }

  .item.active {
    color: #333333;
  }

  .item.active::after {
    content: "";
    width: 42rpx;
    height: 5rpx;
    border-radius: 3rpx;
    @include background_color("background_color");
    position: absolute;
    bottom: 0rpx;
    left: 0;
    right: 0;
    margin: auto;
  }
}

.butns {
  width: auto;
  height: 60rpx;
  border-radius: 10rpx;
  font-size: 24rpx;
  color: #ffffff;
  white-space: nowrap;
  display: flex;
  justify-content: center;
  align-items: center;
}

.starts {
  width: 20rpx;
  height: 20rpx;
  margin-right: 10rpx;
  display: block;
}

.starts-box {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.shop_list_body {
  padding: 0 20rpx;
  box-sizing: border-box;
}

.shop-item {
  display: flex;
  margin-top: 30rpx;
  flex-direction: column;
  background-color: white;
  border-radius: 20rpx;
  padding: 20rpx;
  box-sizing: border-box;
}

.shop-info-top {
  width: 100%;
  height: 100rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.shop_logo {
  width: 100rpx;
  height: 100rpx;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 15rpx;
  display: block;
}

.shopinfo {
  padding-left: 20rpx;
  box-sizing: border-box;
  padding-top: 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  flex: 1;
}

.shop-item_shop_others {
  padding: 10rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  text-align: right;
  padding-top: 0;
  font-size: 26rpx;
  color: #333333;
}

.shop-product {
  width: 100%;
  // height: 280rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  // padding: 10rpx;
  box-sizing: border-box;

  margin-top: 18rpx;
  // border-radius: 15rpx;
}

.shop-product-item {
  margin-right: 16rpx;
}

.shop-pitem-image {
  width: 210rpx;
  height: 210rpx;
  background: #eeeeee;
  border-radius: 15rpx;
  display: block;
  flex-shrink: 0;
}

.sales {
  color: #585858;
}

.collect {
  margin-bottom: 26rpx;
}
</style>
